<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!--路线修改-->
    <title>公交管理系统</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/layuimini.css?v=2.0.4.2}" media="all">
    <link rel="stylesheet" th:href="@{/css/themes/default.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <style>
        body{
            padding: 20px;
        }
    </style>
</head>
<body>
<form class="layui-form" action="" th:object="${route}">
    <input type="hidden" id="id" th:field="*{id}">
    <div class="layui-form-item">
        <label class="layui-form-label">路线名称</label>
        <div class="layui-input-block">
            <input type="text" th:field="*{name}" id="name" required="required"  lay-verify="required" placeholder="请输入路线名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">起始站点</label>
        <div class="layui-input-block">
            <input type="text" th:field="*{startingPoint}" required="required"  lay-verify="required" placeholder="请输入起始站点" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">终止站点</label>
        <div class="layui-input-block">
            <input type="text" th:field="*{end}" required="required"  lay-verify="required" placeholder="请输入终止站点" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">中间站点</label>
        <div class="layui-input-block">
            <div id="demo1"></div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button id="btn-submit" class="layui-btn" lay-submit lay-filter="btn-submit-filter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script src="https://maplemei.gitee.io/xm-select/xm-select.js" th:src="@{https://maplemei.gitee.io/xm-select/xm-select.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
    <script th:inline="javascript">


        layui.use(['laydate','table','form','jquery'], function(){
            var laydate = layui.laydate;
            var table = layui.table;
            var form = layui.form;
            var $ = layui.$;
            var layer=layui.layer;
            /*页面加载*/
            layer.ready(function(){
                $.ajax({
                    type:"get",
                    url:"/route-site/getSitesByRoute/"+$("#id").val(),
                    dataType:"json",
                    success : function (data) {
                        if (data.code === "200") {
                            var options = {
                                el: '#demo1',
                                name: 'xmselectName',//表单的name属性
                                layVerify: 'required',//必填项
                                //layVerType: 'tips',//提示类型 同layui
                                tips: '选择站点',
                                toolbar: {//工具条,全选,清空,反选
                                    show: true,
                                    list: [
                                        'ALL',
                                        'CLEAR',
                                        'REVERSE',
                                    ]
                                },
                                data: [],
                                initValue: data.data.split(","),//默认初始化,也可以数据中selected属性
                                // language: 'zn',//语言包
                                filterable: true,//搜索功能
                                autoRow: true,//选项过多,自动换行
                                repeat: false,//是否支持重复选择
                                max: 12,//最多选择5个
                                template({ item, sels, name, value }){
                                    //template:自定义下拉框的模板
                                    return item.name
                                },
                            };
                            var demo1 = xmSelect.render(options)
                            setTimeout(function(){
                                /*获取站点信息*/
                                $.ajax({
                                    type:"get",
                                    url:"/site/getSiteListAdd",
                                    dataType:"json",
                                    success : function (data) {
                                        if (data.code === "200") {
                                            var data=data.data
                                            demo1.update({data: data})
                                        }
                                    }
                                })
                                // //假设data是ajax 异步获取的
                                // var data =[
                                // //selected属性可以初始化下拉框
                                // //{name: '水果', value:'shuiguo',selected:true, disabled: true},
                                //     {name: '水果', value:'shuiguo'},
                                //     {name: '蔬菜', value: 'shucai'},
                                //     {name: '桌子', value: 'zhuozi'},
                                //     {name: '北京', value: 'beijing'},
                                // ];
                                //模拟通过ajax 获取json数据,异步更新多选下拉框的值
                                // demo1.update({data: data})
                            },100);

                        }else {
                            layer.msg(data.message,{icon:1,time:1000});
                        }
                    }
                })


            })

            /*验证路线名是否可用*/
            $("#name").blur(function(){
                var name=$("#name").val()
                $.ajax({
                    type:"get",
                    url:"/route/judgeAvailable",
                    data:{name:name},
                    dataType:"json",
                    success : function (data) {
                        console.log(data)
                        if (data.code!=='200') {
                            layer.msg(data.message,{icon:0,time:1500});
                        }
                    }
                })
            })
            laydate.render({
                elem: '[name="birthday"]' //指定元素
            });

            // 表单提交
            form.on('submit(btn-submit-filter)', function(data){
                $("#btn-submit").attr("disabled","disabled").addClass("layui-btn-disabled");
                // 异步请求提交数据
                var url = "/route/updateRoute";
                $.post(url,data.field,function (response) {
                    if(response.code == '200'){
                        // 成功提示
                        layer.msg(response.message, {
                            icon: 1,
                            time: 1000 //2秒关闭（如果不配置，默认是3秒）
                        }, function(){
                            // 刷新表格
                            parent.refreshTable();
                            // 关闭窗口
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                        });
                    }else{
                        $("#btn-submit").removeAttr("disabled","disabled").removeClass("layui-btn-disabled");
                        // 失败则提示错误信息，窗口不关闭
                        layer.alert(response.message, {
                            icon: 2,
                            anim: 6,
                            title: "操作失败"
                        });
                    }
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
        });
    </script>
</body>
</html>
